<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.hoveraccordion.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
   $('#example2').hoverAccordion({ 
      keepHeight: true, 
      activateItem: 3, 
      speed: 'fast' 
   }); 
}); 
</script>

<style type="text/css">
/* Styles for Example #2 */
        #example2 {
            margin:0;
            padding:0;
            width:300px;
            list-style-type:none;
            background-color:#FFFFFF;
            color:#000000;
            line-height:120%;
            height:300px;
        }

        #example2 a {
            display:block;
            font-weight:normal;
            text-decoration:none;
        }

        #example2 ul {
            overflow: hidden;
            margin:0;
            padding:0;
        }

        #example2 li {
            margin:0;
            padding:0;
            list-style-type:none;
        }

        #example2 li a {
            width:285px;
            padding:5px 0 0 15px;
            display:block;
            color:#000000;
            background-image:url(ha-header.jpg);
            height:25px;
        }

        #example2 li a.closed {
            color:#000000 !important;
            background-image:url(ha-header.jpg) !important;
        }

        #example2 li.firstitem a.closed {
            color:#000000 !important;
            background-image:url(ha-header-first.jpg) !important;
        }

        #example2 li.lastitem a.closed {
            color:#000000 !important;
            background-image:url(ha-header-last.jpg) !important;
        }

        #example2 li li {
            border-left:1px solid #E5E5E5;
            border-right:1px solid #E5E5E5;
            padding:0 15px 0 15px;
            height:175px;
        }

        #example2 li a.opened {
            background-image:url(ha-header-active.jpg);
            color:#FFFFFF;
        }

        #example2 li.firstitem a.opened {
            background-image:url(ha-header-first-active.jpg);
            color:#FFFFFF;
        }

        #example2 li.lastitem li {
            margin-bottom:-4px;
        }

        #example2 li.lastitem ul {
            background-image:url(ha-footer.jpg);
            background-repeat:no-repeat;
            background-position:bottom;
            padding-bottom:4px;
        }

</style>

<ul id="example2">
                <li>
                    <a href="#">Item 1</a>
                    <ul>
                        <li>
                            Content #1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                            sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                            erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing
                            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                            aliquyam erat, sed diam voluptua.
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Item 2</a>
                    <ul>
                        <li>
                            Content #2 - At vero eos et accusam et justo duo dolores et ea rebum.
                            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                            dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.
                            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                            dolor sit amet.
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Item 3</a>
                    <ul>
                        <li>
                            Content #3 - Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Item 4</a>
                    <ul>
                        <li>
                            Content #4 - Vet clita kasd gubergren, no sea takimata sanctus est
                            Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
                            et ea rebum. Vet clita kasd gubergren, no sea takimata sanctus est
                            Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
                            et ea rebum.
                        </li>
                    </ul>
                </li>
            </ul>
